<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<mat-card class="subscriptions__filters" [formGroup]="filtersForm">
  <mat-card-header>
    <mat-card-title>Subscriptions</mat-card-title>
    <mat-card-subtitle
      >Retrieve all the registered subscriptions per API. Subscription represents the plans the application has subscribed
      to.</mat-card-subtitle
    >
    <div *ngIf="subscriptionsTableDS && !isLoadingData" class="subscriptions__filters__header__button">
      <button
        *gioPermission="{ anyOf: ['application-subscription-c'] }"
        mat-raised-button
        type="button"
        color="primary"
        aria-label="Create a subscription"
        (click)="createSubscription()"
      >
        <mat-icon svgIcon="gio:plus"></mat-icon>Create a subscription
      </button>
    </div>
  </mat-card-header>

  <mat-card-content>
    <gio-banner-info [collapsible]="true">
      Subscription status details
      <span gioBannerBody>
        <ul>
          <li>
            <strong>Accepted</strong>: Subscription is valid and the application can use its API Key to perform operations of the API. The
            subscription can be renewed, revoked or valid until its expiration date.
          </li>
          <li><strong>Pending</strong>: The application has asked access for the API and wait for the API owners approvals.</li>
          <li><strong>Rejected</strong>: Subscription is rejected and the application cannot use the API.</li>
          <li><strong>Closed</strong>: Subscription is closed and the application cannot use the API.</li>
        </ul>
      </span>
    </gio-banner-info>

    <div class="subscriptions__filters__inputs">
      <mat-form-field class="subscriptions__filters__inputs__field">
        <mat-label>API</mat-label>
        <gio-form-tags-input
          [placeholder]="'Search for an API'"
          formControlName="apis"
          [autocompleteOptions]="searchApis"
          [displayValueWith]="displayApi"
          [useAutocompleteOptionValueOnly]="true"
        ></gio-form-tags-input>
      </mat-form-field>

      <mat-form-field class="subscriptions__filters__inputs__field">
        <mat-label>Status</mat-label>
        <mat-select formControlName="status" [multiple]="true">
          <mat-option *ngFor="let status of statuses" [value]="status.id">{{ status.name }}</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field class="subscriptions__filters__inputs__field">
        <mat-label>API Key</mat-label>
        <input matInput formControlName="apiKey" />
      </mat-form-field>
    </div>
    <div class="subscriptions__filters__buttons">
      <button mat-raised-button type="button" color="secondary" aria-label="Reset filters" (click)="resetFilters()">
        <mat-icon svgIcon="gio:refresh-cw"></mat-icon>Reset filters
      </button>
    </div>
  </mat-card-content>
  <gio-table-wrapper
    [disableSearchInput]="true"
    [length]="subscriptionsCount"
    [filters]="filtersStream.value.tableWrapper"
    [paginationPageSizeOptions]="[10, 25, 50, 100]"
    (filtersChange)="onFiltersChanged($event)"
  >
    <table
      mat-table
      [dataSource]="subscriptionsTableDS"
      class="subscriptions__table"
      id="subscriptionsTable"
      aria-label="Subscriptions table"
    >
      <!-- Display Security Type Column -->
      <ng-container matColumnDef="securityType">
        <th mat-header-cell *matHeaderCellDef id="securityType">Security type</th>
        <td mat-cell *matCellDef="let element">
          {{ element.securityType }}
          @if (element.isSharedApiKey) {
            <span class="gio-badge-accent" matTooltip="Use shared API keys">Shared</span>
          }
        </td>
      </ng-container>

      <!-- Display Plan Column -->
      <ng-container matColumnDef="plan">
        <th mat-header-cell *matHeaderCellDef id="name">Plan</th>
        <td mat-cell *matCellDef="let element">{{ element.planName }}</td>
      </ng-container>

      <!-- Display Application Column -->
      <ng-container matColumnDef="api">
        <th mat-header-cell *matHeaderCellDef id="api">API</th>
        <td mat-cell *matCellDef="let element">
          <span [matTooltip]="element.apiPo$ | async">{{ element.apiName }}</span>
        </td>
      </ng-container>

      <!-- Display Created at Column -->
      <ng-container matColumnDef="createdAt">
        <th mat-header-cell *matHeaderCellDef id="createdAt">Created at</th>
        <td mat-cell *matCellDef="let element">
          {{ element.createdAt | date: 'medium' }}
        </td>
      </ng-container>

      <!-- Display Processed at Column -->
      <ng-container matColumnDef="processedAt">
        <th mat-header-cell *matHeaderCellDef id="processedAt">Processed at</th>
        <td mat-cell *matCellDef="let element">
          {{ element.processedAt | date: 'medium' }}
        </td>
      </ng-container>

      <!-- Display Start at Column -->
      <ng-container matColumnDef="startingAt">
        <th mat-header-cell *matHeaderCellDef id="startingAt">Started at</th>
        <td mat-cell *matCellDef="let element">
          {{ element.startingAt | date: 'medium' }}
        </td>
      </ng-container>

      <!-- Display End at Column -->
      <ng-container matColumnDef="endAt">
        <th mat-header-cell *matHeaderCellDef id="endAt">Ended at</th>
        <td mat-cell *matCellDef="let element">
          {{ element.endAt | date: 'medium' }}
        </td>
      </ng-container>

      <!-- Display Status Column -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef id="status">Status</th>
        <td mat-cell *matCellDef="let element">
          <span [class]="'gio-badge-' + element.statusBadge">{{ element.status }}</span>
        </td>
      </ng-container>

      <!-- TODO? add analytics preview Column -->

      <!-- Actions Column -->
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef id="actions"></th>
        <td mat-cell *matCellDef="let element">
          <div class="subscriptions__table__actions">
            <a
              *gioPermission="{ anyOf: ['application-subscription-r', 'application-subscription-u'] }"
              mat-button
              aria-label="Subscription details"
              matTooltip="Subscription details"
              [routerLink]="'./' + element.id"
            >
              <mat-icon svgIcon="gio:eye-empty"></mat-icon>
            </a>

            <button
              *gioPermission="{ anyOf: ['application-subscription-d'] }"
              mat-button
              color="warn"
              matTooltip="Close subscription"
              (click)="closeSubscription(element)"
            >
              <mat-icon svgIcon="gio:x-circle"></mat-icon>
            </button>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

      <!-- Row shown when there is no data -->
      <tr class="mat-mdc-row mdc-data-table__row" *matNoDataRow>
        <td
          *ngIf="!isLoadingData && subscriptionsTableDS.length === 0"
          class="mat-mdc-cell mdc-data-table__cell"
          [attr.colspan]="displayedColumns.length"
        >
          {{ 'There is no subscription (yet).' }}
        </td>
        <td *ngIf="isLoadingData" class="mat-mdc-cell mdc-data-table__cell loader" [attr.colspan]="displayedColumns.length">
          <gio-loader></gio-loader>
        </td>
      </tr>
    </table>
  </gio-table-wrapper>
</mat-card>
